<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>02.固定列、不定高的瀑布流布局实现</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			.fl {
				float: left;
			}
			.fr {
				float: right;
			}
			#ul1 {
				width: 1040px;
				margin: 100px auto 0;
			}
			#ul1 li {
				width: 247px;
				float: left;
				margin: 0 10px 0 0;
			}
			li div {
				border: 1px solid #000;
				padding: 10px;
				margin: 0 0 10px 0;
			}
			li img {
				width: 225px;
				display: block;
			}
			li p {
				width: 225px;
				word-break: break-all;
				margin: 10px 0 0 0;
			}
		</style>
		<script src="./js/ajax.js"></script>
		<script src="./js/JSON.js"></script>
		<script>
			window.onload = function () {
				var oUl = document.getElementById("ul1");
				var aLi = oUl.getElementsByTagName("li");
				var iLen = aLi.length;
				var iPage = 1;
				// 定义一个开关，用来控制每次滚动到底部无论我怎么滚，每次只加载一页的数据的
				var bBtn = true;
				
				// 初始化数据处理
				getList ();
				
				function getList () {
					ajax('GET', './php/getPics.php', 'cpage=' + iPage, function (data) {
						// alert(data);	
						var objData = JSON.parse(data);
						
						if ( !objData.length ) return;
						
						// alert(objData);
						
						for ( var i = 0; i < objData.length; i++ ) {
							// 获取高度最小Li的索引值
							var _index = getShortLi ();
							var oDiv = document.createElement("div");
							var oImg = document.createElement("img");
							oImg.src = objData[i].preview;
							oImg.style.width = '225px';
							// 让height跟着宽度来等比缩放
							oImg.style.height = objData[i].height * (225 / objData[i].width) + 'px';
							oDiv.appendChild(oImg);
							var oP = document.createElement("p");
							oP.innerHTML = objData[i].title;
							oDiv.appendChild(oP);
							aLi[_index].appendChild(oDiv);
						}
						
						// 当事情办完了，将开关重新打开，置为true
						bBtn = true;
					});
				}
				
				window.addEventListener('scroll', function () {
					// 获取高度最小Li的索引值
					var _index = getShortLi ();
					var oLi = aLi[_index];
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					/**
					 * 判断下拉最短图片Li是否进入可视区的条件是：
					 * 当前Li到顶部的距离 + Li本身的高度 < 页面可视区的高度 + 页面的滚动距离，
					 * 那么就表示进入可视区了
					 */
					if ( getTop(oLi) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
						// alert('进入可视区了吗......');
						if (bBtn) {
							// 正在办事，不准人打扰
							bBtn = false;
							iPage++;
							getList ();	
						}
					}
				}, false);
				
				/**
				 * 获取高度最小Li的索引值
				 */
				function getShortLi () {
					var index = 0;
					var iH = aLi[index].offsetHeight;
					for ( var i = 1; i < iLen; i++ ) {
						if ( aLi[i].offsetHeight < iH ) {
							index = i;
							iH = aLi[i].offsetHeight;
						}
					}
					return index;
				}
				
				/**
				 * 获取一个元素到顶部的距离
				 */
				function getTop (obj) {
					var iTop = 0;
					while (obj) {
						iTop += obj.offsetTop;
						obj = obj.offsetParent;
					}
					return iTop;
				}
			};
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
